import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import css from './info.module.scss'
import ResponsiveImage from '@/components/ResponsiveImage'
import { formatNumber } from '@/utils'
export default class BangumiInfo extends PureComponent {
    static propTypes = {
        detailData: PropTypes.object
    }

    state = {        
        isExpand: false
    }

    get mediaInfo() {
        return this.props?.detailData?.mediaInfo ?? {}
    }

    get stat() {
        return this.props?.detailData?.seasonStat ?? {}
    }

    get pubInfo() {
        return this.props?.detailData?.pubInfo ?? {}
    }
    
    get rating() {
        return this.props?.detailData?.mediaRating ?? {}
    }

    get score() {
        return this.rating.score ? `${this.rating.score}分` : '暂无评分'
    }

    get ratingCount() {
        return this.rating.count ? `${this.rating.count}人` : (this.pubInfo.is_started === 0 ? '未开播' : '评分人数不足')
    }

    handleExpand = () => {
        this.setState({
            isExpand: !this.state.isExpand
        })
    }

    render() {
        const { detailData } = this.props
        const { isExpand } = this.state
        const info = this.mediaInfo
        const stat = this.stat
        const score = this.score
        const ratingCount = this.ratingCount
        return (
            <div className={css["wrap"]}>
                <div className={css["main"]}>
                    <div className={css["cover"]}>
                        <ResponsiveImage className={css["cover-image"]} src={info.cover} size="@300w_400h" />
                    </div>
                    <div className={css["content"]}>
                        <div className={css["title"]}>{info.title}</div>
                        <div className={css["count"]}>
                            <span className="view"><i className="fa fa-bofangshu"></i> {formatNumber(stat.views) }</span>
                            <span className="fav"><i className="fa fa-heart"></i> { formatNumber(stat.favorites) }</span>
                        </div>
                        <div className={css["state"]}>{detailData.newestEp.desc}</div>
                        <div className={`${css["desc"]} ${ isExpand ? css['expand'] : ''}`} onClick={this.handleExpand}>
                            <span className="btn">
                                <i className={`fa ${isExpand ? 'fa-dropup':'fa-dropdown'}`}></i>
                            </span>
                            { info.evaluate }
                        </div>
                        <div className={css["score"]}>
                            <span className={css["rating"]}><em>{ score }</em></span>
                            <span>{ ratingCount }</span>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
